<template>
  <basic-container v-loading="saveLoading">
    <div style="width:100%;min-height: 50px;padding-left:5px;display: inline-block;">
      <el-container>
        <el-container>
          <el-aside width="100px">
            <el-button type="primary" @click="handlePrint" style="float: left;">打印</el-button>
          </el-aside>
        </el-container>
      </el-container>
    </div>
    <template>
      <div id="printDetail">
        <div style="background:#fff;height: 50px;line-height: 50px;margin-bottom: 10px">
          <div class="pull-auto"  style="text-align: left;font-size: 16px;color:#3478f5;margin-right:10px">
            <div class="block">
              车间：{{workshopName}} <i class="el-breadcrumb__separator el-icon-arrow-right"></i>产线模型名称：{{realityLineName}}<i class="el-breadcrumb__separator el-icon-arrow-right"></i>产线模板： {{lineTplName}}<i class="el-breadcrumb__separator el-icon-arrow-right"></i>
              产线类型：{{lineType}}
            </div>
          </div>
        </div>
        <div class="form-designer">
          <el-container style="border: #e0e0e0 solid 1px;border-top:none">
            <el-main class="demo">
              <avue-flow :height="800"
                         width="100%"
                         ref="flow"
                         :option="option"
                         v-model="flowForm">
                <template #header="{node}" >
                  <el-tooltip class="item" effect="dark" :content="`工位(`+(node || {}).name+`)`" placement="top-start">
                        <span style="width:145px;white-space: nowrap;overflow: hidden;display: inline-block;vertical-align: bottom;text-overflow: ellipsis;">
                            工位({{(node || {}).name}})
                        </span>
                  </el-tooltip>
                </template>
                <template slot-scope="{node}">
                  <el-collapse :ref="node.id+`Ref`"  v-model="showActive[node.id]" :style="{width:'100%',zIndex:zIndexStyle}"  @mouseover.native="handleMouseEnter(node.id)"  @mouseout.native="handleMouseLeave(node.id)">
                    <el-collapse-item title="工序信息" name="1">
                      <el-descriptions  class="margin-top"  style="width: 100%;" title="" :column="1" size="small" border >
                        <el-descriptions-item  label="工序" :labelStyle="{'width': '50px'}"
                                               v-model="`process_`+node.id"
                                               v-for="(item, index) in workPositionProcessItem[node.id]">
                          <span style="float: left;margin-top: 7px">{{item.processName}}</span>
                          <el-tooltip class="item" effect="dark" content="设备人员信息" placement="top-start">
                            <el-button type="text"  @click="devicePersonInfo(node,item,index)" style="float: right;font-size: 16px"><i class="el-icon-tickets"></i></el-button>
                          </el-tooltip>
                        </el-descriptions-item>
                      </el-descriptions>
                    </el-collapse-item>
                  </el-collapse>
                </template>
              </avue-flow>

            </el-main>
          </el-container>
        </div>
      </div>
    </template>

    <!--设备人员信息弹窗页面-->
    <el-dialog title=""
               :visible.sync="deviceDialogVisible"
               width="50%"
               height="600"
               lock-scroll
               v-dialogDrag
               append-to-body
               :close-on-click-modal="false"
               v-if="deviceDialogVisible"
               :fullscreen="deviceDialogFull">
      <el-backtop target=".el-card__body .el-dialog__wrapper .el-dialog" :right="15" :bottom="20" :visibility-height="1" />
      <el-backtop :bottom="60"></el-backtop>
      <template slot="title">
        <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">
              <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
              设备人员信息
          </span>
          <div class="avue-crud__dialog__menu" style="cursor: pointer;margin-top: -2px;margin-right: 10px;" @click="deviceDialogFull? deviceDialogFull=false: deviceDialogFull=true">
            <i class="el-icon-full-screen"></i>
          </div>
        </div>
      </template>
      <!--工序菜单-->
      <div style="height:10vh;width: 90%;margin-left: auto;margin-right: auto">
        <div style="width: 100%;">
          <el-steps  status="process">
            <el-step :title="workPositionName">
              <template slot="icon">
                工位
              </template>
            </el-step>
            <el-step :title="processInfo.workshopSection">
              <template slot="icon">
                工段
              </template>
            </el-step>
            <el-step :title="processInfo.processName">
              <template slot="icon">
                工序
              </template>
            </el-step>
          </el-steps>
        </div>
      </div>
      <div class="el-dialog-height" style="height: 40vh">
        <el-table :data="infoList"   border style="width: 100%;height:40vh;float: left;display: inline-block">
          <el-table-column show-overflow-tooltip prop="deviceName" align="center" label="设备">
            <template slot-scope="scope">
              <span>{{scope.row.deviceName}}{{scope.row.deviceSn}}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="toolName" align="center" label="工具"></el-table-column>
          <el-table-column show-overflow-tooltip prop="clampName" align="center" label="夹具"></el-table-column>
          <el-table-column show-overflow-tooltip prop="personName" align="center" label="员工"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import { getObj} from '@/api/pfoc/factorysettings' //获取当前工厂信息
import { getDevice,getDeviceClassList} from '@/api/hengdong/pfocinterface'//获取设备相关
import { getLineModelingInfo } from '@/api/pfoc/realityproducelinemodeling' //产线建模修改与获取产线建模信息
import { getPersonCredentialList } from '@/api/workorder/personcredentialmanage' //获取所有人员数据

/**引入设备下拉框*/
import deviceSelect from '@/views/pfoc/realityproductline/custom-select'

export default {
  name: "view-line-modeling",
  components: {
    //设备下拉框
    deviceSelect,
  },
  props:{
    lineId:{//产线ID
      type:String
    },
  },
  data() {
    return {
      formCollapse: [],
      count: 0,
      nodeCount:0,//节点下标
      form: [],//提交时数据集合
      flowForm:'',
      option: {
        name: null,
        nodeList: [],//工位节点集合
        lineList: [],//工位各节点指向顺序集合
      },
      processInfo:{//工位信息
        workshopSection:null,//工段
        processName:null,//工位名称
        processId:null,//工位ID
      },
      info:{
        deviceSn:null,//设备SN
        toolSn:null,//工具SN
        clampSn:null,//夹具SN
        personName:null,//员工
        deviceName:null,//设备SN
        toolName:null,//工具SN
        clampName:null,//夹具SN
      },
      index:null,//用于标记打开的是第几个
      infoList:[],//存储设备人员信息
      workPositionProcessItem: {},//存储工位对应工位的二位数组
      personCredentialList:[],//人员资质数据集
      showActive:[],//属性展示model集合
      logList:[],//操作日志集合
      realityLineName:null,//产线名称
      deviceList:[],//设备集合
      clampList:[],//夹具集合
      toolList:[],//工具集合
      deviceClassList:[],//设备分类集合
      organizationId:null,//组织ID
      organizationName:null,//组织名称
      saveLoading:false,//保存时遮罩开关
      lineModelingDetailsDelIds:[],//存储需要删除的节点工位ID（即已有工位删除ID）
      zIndexStyle:"",
      mainData:{},//真实产线主数据
      subData:[],//真实产线详情数据
      lineTplId:null,//产线模板ID
      lineTplName:null,//产线模板名称
      workshopList:[],//车间数据集合
      workshopId:null,//车间ID
      workshopName:null,//车间名称
      lineType:null,//产线类型（手动线、自动线）
      deviceDialogVisible:false,//设备添加弹窗开关
      deviceDialogFull:false,//设备添加弹窗放大缩小
      workPositionName:null,//工位名称(用于工位添加)
      workPositionId:null,//工位ID(用于工位添加)
      nodeId:null,//工位节点ID(用于工位添加)
      lineTypeList:[//产线类型列表
        {
          value: '手动线',
          label: '手动线'
        }, {
          value: '自动线',
          label: '自动线'
        }
      ]
    };
  },

  created() {
    //获取当前工厂信息
    this.getFactoryInfo();
    //获取所有人员数据
    this.getPersonCredentialListData();
  },
  computed: {
    nodeList () {
      return this.option.nodeList
    }

  },
  mounted() {
    this.nodeCount = this.option.nodeList.length;//初始化节点下标
  },
  methods: {
    getLineModelingInfos(){
      this.formCollapse = []
      if(!this.validatenull(this.lineId)) {
        this.saveLoading = true
        getLineModelingInfo(this.lineId).then(response => {
          this.$refs.flow.resetPlumb();
          var data =response.data.data;
          //主表数据
          this.mainData= data.realityProduceLineModeling;//主数据
          //子表数据
          this.subData = data.realityProduceLineModelingDetailsList;//子表数据
          //产线名模型称
          this.realityLineName =this.mainData.realityLineName;
          //产线模板ID
          this.lineTplId =this.mainData.lineTplId;
          //产线模板名称
          this.lineTplName = this.mainData.lineTplName;
          //车间ID
          this.workshopId = this.mainData.workshopId;
          //车间名称
          this.workshopName = this.mainData.workshopName;
          //产线类型
          this.lineType = this.mainData.lineType;
          //设置反显工序
          this.option.nodeList = JSON.parse(this.mainData.processNodes);
          //设置反显工序指向顺序
          this.option.lineList =  JSON.parse(this.mainData.processNodeLine);
          //初始化节点下标
          var n =  this.option.nodeList[ this.option.nodeList.length-1].id;
          this.nodeCount = parseInt(n.split("node")[1])+1;

          //从子表数据中根据nodeId字段将对应的workPositionProcessItem填入到页面的workPositionProcessItem二位数组中
          for(var i=0;i<this.subData.length;i++){
            var nodeId = this.subData[i].nodeId;
            var item =JSON.parse(this.subData[i].workPositionProcessItem);
            this.$set(this.workPositionProcessItem,nodeId, item);//添加工位集合
          }
          //重新初始化flow组件
          this.$refs.flow.init();
          this.$refs.flow.cleanupDarg();
          this.saveLoading = false
        }).catch(() => {
          this.saveLoading = false
        })
      }
    },
    /**获取工厂信息*/
    getFactoryInfo() {
      const factoryId=1;
      getObj(factoryId).then(response => {
        this.organizationId = response.data.data.menuId;//组织ID
        this.organizationName = response.data.data.organizationName;//组织名称
        //获取工厂设备集合
        this.getFactoryDeviceList();
      })
    },
    /**获取工厂设备集合*/
    getFactoryDeviceList(){
      this.saveLoading = true
      var obj={
        position:this.organizationName,//设置组织查询条件
      }
      getDevice(obj).then(response => {
        this.deviceList = response.data.data;//设备集合
        for(var i =0; i<this.deviceList.length;i++){
          if(this.deviceList[i].deviceClass==20){//组织下工具夹具筛选
            this.clampList.push(this.deviceList[i]);//夹具集合
            this.toolList.push(this.deviceList[i]);//工具集合
          }
        }
        this.saveLoading = false
      })
    },
    //获取所有人员数据
    getPersonCredentialListData(){
      getPersonCredentialList().then(response => {
        this.personCredentialList = response.data.data;
      })
    },
    //设备人员信息
    devicePersonInfo(node,processInfo,index){
      this.workPositionName=node.name;//工位名称(用于工序添加)
      this.workPositionId=node.mark;//工位ID(用于工序添加)
      this.nodeId=node.id;//工位节点ID(用于工序添加)
      this.processInfo.processName = processInfo.processName;//工序名称
      this.processInfo.processId = processInfo.id;//工序ID
      this.processInfo.workshopSection = processInfo.workshopSection;//工位所属工段
      this.index = index;
      this.infoList = this.workPositionProcessItem[node.id][index].info;
      this.deviceDialogVisible=true;
    },
    //打印
    handlePrint () {
      this.$Print('#printDetail');
    },
    //鼠标移到置顶
    handleMouseEnter(nodeId) {
      //属性鼠标移到展开
      // this.$set(this.showActive, nodeId, ['1']);
      let ref = nodeId+"Ref";//获取到当前的ref
      this.$refs[ref].$parent.$refs.node.style.zIndex="999999";
      this.zIndexStyle="1";

    },
    //鼠标移开取消置顶
    handleMouseLeave(nodeId) {
      //属性鼠标移开关闭
      // this.$set(this.showActive, nodeId, []);
      let ref = nodeId+"Ref";//获取到当前的ref
      this.$refs[ref].$parent.$refs.node.style.zIndex="2";
      this.zIndexStyle="";

    },
  }
};
</script>

<style scoped>
/deep/.avue-flow__node{
  height: auto!important;
}
/deep/ .avue-flow__node-header {
  line-height: 30px;
}
/deep/.el-descriptions__title {
  font-size: 14px;
  font-weight: 400;
  margin-top: 5px;
}



/deep/ .el-dialog-height {
  height: 30vh;
  width: 90%;
  margin-top: 10px;
  overflow: auto;
  /* 隐藏默认的滚动条样式 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


/deep/ .el-step__icon.is-text{
  color: #000;
  font-size: 12px;
  padding: 10px;
  border-color: #000;
  width: 50px;
  height: 50px;
}
/deep/.el-step__icon{
  width: 40px;
  height: 40px;
}
/deep/.el-step.is-horizontal .el-step__line{
  top:20px!important;
  border-color: #000;
}
/deep/.el-step.is-vertical .el-step__line {
  left: 23px!important;
}
/deep/.el-step.is-vertical .el-step__main{
  padding-left: 36px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding-top: 11px;
  color: #000;
  font-size: 12px;
}
/deep/.el-step.is-vertical .el-step__title{
  color: #000;
  font-size: 13px;
}
/deep/.el-step__line {
  position: absolute;
  border-color: inherit;
  background-color: #242526;
}
/deep/.el-step__title.is-wait {
  color: #040404;
}
/deep/.el-table thead {
  color: #040404!important;
}

/*以下样式是打印的时候avue表格错乱修正方式（主要是序号列和操作列固定影响的）*/
/deep/.el-table__fixed{
  display: none!important;
}
/deep/.el-table__fixed-right{
  display: none!important;
}
/deep/.el-table__cell.is-hidden>*{visibility:visible !important;}

/deep/ .avue-grid{
  display: none!important;
}
/deep/.el-main{
  background:#fff !important;
}
/deep/.el-card__body{
  padding: 0px!important;
}
/*去掉滚动条样式*/
.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
